<script setup lang="ts">
import { getQuestionListBySubjectId, deleteQuestion } from '@/api/subject';
import { Question } from '@/api/subject/type';
import YHeader from '@/components/YHeader.vue'
import { router } from '@/router';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { showDialog, showToast } from 'vant';

const subjectId = ref('');
const questionList = ref([] as Question[]);

onMounted(() => {
    const route = useRoute();
    const id = route.query.id;
    if (!Array.isArray(id)) {
        subjectId.value = id as string;
        getQuestionListBySubjectId(subjectId.value).then((res) => {
            questionList.value = res.data;
        })
    }
})
const toCreate = () => {
    router.push({
        name: "QuestionCreate",
        query: {
            "id": subjectId.value
        }
    });
}

const toData = () => {
    router.push({
        name: "ExerciseData",
        query: {
            "id": subjectId.value
        }
    })
}

const handleDelete = (questionId: string) => {
    showDialog({
        title: '确认删除',
        message: '确定要删除这道题目吗？',
        showCancelButton: true,
    }).then(() => {
        deleteQuestion(questionId).then(() => {
            showToast('删除成功');
            // 刷新题目列表
            getQuestionListBySubjectId(subjectId.value).then((res) => {
                questionList.value = res.data;
            });
        });
    }).catch(() => {
        // 取消删除
    });
}
</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <div class="top">
                <div class="row">
                    <van-button class="button" type="primary">导入题目</van-button>
                    <van-button class="button" type="primary" @click="toCreate">创建题目</van-button>
                    <van-button class="button" type="primary" @click="toData">查重数据</van-button>
                </div>
            </div>
            <div class="list">
                <div v-for="(item, index) in questionList" :key="index" class="item">
                    <div class="question-content">
                        <p>{{ item.title }}</p>
                    </div>
                    <div class="delete-btn">
                        <van-button type="danger" size="small" @click="handleDelete(item.id)">删除</van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    width: 94%;
    .top {
        display: flex;
        flex-direction: column;
        margin: 3%;
        .row {
            display: flex;
            .button {
                margin-left: 3%;
            }
        }
    }
    .list {
        display: flex;
        flex-direction: column;
        margin: 3%;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            .question-content {
                flex: 1;
                p {
                    margin: 0;
                }    
            }
            .delete-btn {
                margin-left: 15px;
            }
        }
    }
}
</style>